  import { Component, ReactNode } from "react";
  import { Button, Popconfirm, Table, message, Input, Space,Tag  } from "antd";
  import { instance } from "../../utils/request";
  import AddCategory  from './AddCategory'
  import EditCategory  from './EditCategory'
  const { Search } = Input;
  class CategoryList extends Component {
    state = {
      dataSource: [], // 添加初始化的dataSource属性
      total: 0, // 总条数
      pagenum: 1, // 当前页
      pagesize: 5, // 显示数量
      type: "", // 查询条件
      showAddCategoryDialog: false, // 是否隐藏
      showEditCategoryDialog: false, // 是否隐藏
      editData: {}, //编辑显示的商品数据
      queryName:''
    };
    loadData = () => {
      const params = {
        pagenum: this.state.pagenum,
        pagesize: this.state.pagesize,
        type: this.state.type,
      };

      instance.get("/categories", { params }).then((res) => {
        this.setState({
          dataSource: res.data.data.result,
          total: res.data.data.total,
        });
      });
    };

    loadDataParams = () => {
      const params = {
        queryName: this.state.queryName,
      };

      instance.get("categories/queryCategory", { params }).then((res) => {
        this.setState({
          dataSource: res.data.data.data,
          total: res.data.data.total,
        });
      });
    };

    // 22章
  showEditDialog = (falg: any) => {
    if (falg) {
      return (
        <EditCategory
          visible={this.state.showEditCategoryDialog}
          closeModal={this.closeEditDialog}
          data={this.state.editData}
        ></EditCategory>
      );
    }
  };
    handleEdit = (record: any) => {
      console.log(record);
      // goods/:id 根据id 进行查询
      instance.get(`categories/${record}`).then((res) => {
        this.setState({
          editData: res.data.data,
          showEditCategoryDialog: true,
        });
      });
    };


    onSearch = (value: any) => {
      this.setState(
        (preState: any) => {
          preState.queryName = value;
        },
        () => {
          this.loadDataParams();
        }
      );
    };

    onSearchTop = (value: any) => {
      this.setState(
        (preState: any) => {
          preState.queryName = value;
        },
        () => {
          this.loadData();
        }
      );
    };

    // 分页，点击页、显示数量
    changePage = (page: number, pagesize: number) => {
      this.setState({ pagenum: page, pagesize: pagesize }, () => {
        this.loadData();
      });
    };

    handleDelete = (id: any) => {
      instance.delete(`/categories/${id}`).then((res) => {
        if (res.data.meta.status === 200) {
          message.success("删除成功!");
          this.loadData();
        } else {
          message.error("删除失败!");
        }
      });
    };

    // 添加商品
    handleAdd = () => {
      this.setState({ showAddCategoryDialog: true });
    };
    // 关闭添加窗口
    closeAddDialog = () => {
      this.setState({ showAddCategoryDialog: false }, () => {
        this.loadData();
      });
      // 重新进行更新刷新页面
    };
    closeEditDialog = () => {
      this.setState({ showEditCategoryDialog: false }, () => {
        this.loadData();
      });
      // 重新进行更新刷新页面
    };

    // 组件加载完挂载
    componentDidMount() {
      this.loadData();
    }


    render() {
      const columns = [
        {
          title: "分类id",
          dataIndex: "cat_id",
          key: "cat_id",
        },
        {
          title: "分类名称",
          dataIndex: "cat_name",
          key: "cat_name",
        },
        {
          title: "排序等级",
          dataIndex: "cat_level",
          key: "cat_level",
          render: (catLevel: number) => {
            let levelText = "";
            switch (catLevel) {
              case 0:
                levelText = "一级";
                break;
              case 1:
                levelText = "二级";
                break;
              case 2:
                levelText = "三级";
                break;
              // 如果还有其他等级，可以继续添加 case 分支
              default:
                levelText = "未知级别";
            }
            return <Tag color="blue">{levelText}</Tag>;
          }
        },
        {
          title: "操作",
          dataIndex: "cat_id",
          key: "cat_id",
          render: (record: any) => (
            <>
              <Button
                onClick={() => {
                  this.handleEdit(record);
                }}
                style={{ marginRight: "10px" }}
              >
                编辑
              </Button>
              <Popconfirm
                okText="确认"
                cancelText="取消"
                title="你确认要删除该记录嘛?"
                onConfirm={() => {
                  this.handleDelete(record);
                }}
              >
                <Button type="primary">删除</Button>
              </Popconfirm>
            </>
          ),
        },
      ];
      return (
        <div>
          <Search
            style={{ width: 400, marginBottom: 20, marginTop: 10 }}
            placeholder="请输入分类名称"
            onSearch={this.onSearch}
            size="large"
            allowClear
            enterButton
          />
          <Button
            style={{ marginTop: "7px", marginLeft: "10px" }}
            onClick={this.handleAdd}
            size="large"
            type="primary"
          >
            添加分类
          </Button>

          <Button
            style={{ marginTop: "7px", marginLeft: "10px" }}
            onClick={this.onSearchTop}
            size="large"
            type="primary"
          >
            恢复查询层级
          </Button>

          <Table
            dataSource={this.state.dataSource}
            columns={columns}
            rowKey="cat_id"
            pagination={{
              pageSize: this.state.pagesize,
              defaultCurrent: this.state.pagenum,
              onChange: this.changePage,
              total: this.state.total,
            }}
          />
        <AddCategory
          close={this.closeAddDialog}
          visible={this.state.showAddCategoryDialog}
        />
        {/*  当点击编辑的时候会变成true，发送异步请求后，展示 */}
        {this.showEditDialog(this.state.showEditCategoryDialog)}

        </div>
      );
    }
  }

  export default CategoryList;
